<template>
  <div class="about-page">
    <!-- 页面头部 -->
    <section class="page-header">
      <div class="container">
        <h1 class="title-primary">关于我们</h1>
        <p class="subtitle">专业的时尚货源平台，连接优质商家与采购商</p>
      </div>
    </section>

    <!-- 平台介绍 -->
    <section class="platform-intro section">
      <div class="container">
        <div class="intro-content">
          <div class="intro-text">
            <h2 class="title-secondary">我们的使命</h2>
            <p>致力于打造最专业的时尚货源平台，为优质商家提供展示机会，为采购商提供可靠的货源渠道，推动整个时尚产业链的健康发展。</p>
            <p>通过严格的商家筛选机制和完善的服务体系，我们确保平台上的每一个商家都具备优质的产品和服务能力。</p>
          </div>
          <div class="intro-image">
            <img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=500&h=400&fit=crop" alt="关于我们" />
          </div>
        </div>
      </div>
    </section>

    <!-- 平台优势 -->
    <section class="platform-advantages section">
      <div class="container">
        <h2 class="title-secondary text-center">平台优势</h2>
        <div class="advantages-grid">
          <div class="advantage-item">
            <div class="advantage-number">01</div>
            <h3>严格筛选</h3>
            <p>多维度评估商家资质，确保入驻商家的品质和信誉</p>
          </div>
          <div class="advantage-item">
            <div class="advantage-number">02</div>
            <h3>精准匹配</h3>
            <p>基于需求和供应的智能匹配，提高合作成功率</p>
          </div>
          <div class="advantage-item">
            <div class="advantage-number">03</div>
            <h3>全程服务</h3>
            <p>从对接到合作全程跟踪服务，保障双方权益</p>
          </div>
          <div class="advantage-item">
            <div class="advantage-number">04</div>
            <h3>数据驱动</h3>
            <p>基于大数据分析，为商家提供市场洞察和决策支持</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 数据统计 -->
    <section class="statistics section">
      <div class="container">
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-number">500+</div>
            <div class="stat-label">优质商家</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">10000+</div>
            <div class="stat-label">成功对接</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">50+</div>
            <div class="stat-label">覆盖城市</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">98%</div>
            <div class="stat-label">客户满意度</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="contact-us section">
      <div class="container">
        <div class="contact-content">
          <div class="contact-info">
            <h2 class="title-secondary">联系我们</h2>
            <p>如果您有任何问题或建议，欢迎随时与我们联系</p>
            <div class="contact-details">
              <div class="contact-item">
                <el-icon><Phone /></el-icon>
                <span>13055317158</span>
              </div>
              <div class="contact-item">
                <el-icon><Message /></el-icon>
                <span>微信客服：HH-188-199</span>
              </div>
              <div class="contact-item">
                <el-icon><Location /></el-icon>
                <span>福建省莆田市城厢区莆田学院创业中心</span>
              </div>
            </div>
          </div>
          <div class="contact-actions">
            <el-button type="primary" size="large" @click="$router.push('/contact')">
              申请入驻
            </el-button>
            <el-button size="large" @click="$router.push('/merchants')">
              浏览商家
            </el-button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { Phone, Message, Location } from '@element-plus/icons-vue'
</script>

<style scoped>
.about-page {
  min-height: 100vh;
  background: var(--accent-color);
}

/* 页面头部 */
.page-header {
  background: white;
  padding: 80px 0 60px;
  text-align: center;
}

/* 平台介绍 */
.platform-intro {
  background: white;
  padding: 80px 0;
}

.intro-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: center;
}

.intro-text p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.intro-image {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-medium);
}

.intro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 平台优势 */
.platform-advantages {
  padding: 80px 0;
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-top: 60px;
}

.advantage-item {
  text-align: center;
  padding: 30px 20px;
}

.advantage-number {
  width: 60px;
  height: 60px;
  background: var(--gradient-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto 20px;
}

.advantage-item h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--text-primary);
}

.advantage-item p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 数据统计 */
.statistics {
  background: var(--gradient-primary);
  color: white;
  padding: 80px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 3rem;
  font-weight: 700;
  color: white;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
}

/* 联系我们 */
.contact-us {
  background: white;
  padding: 80px 0;
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 60px;
  align-items: center;
}

.contact-info p {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin-bottom: 30px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1rem;
  color: var(--text-secondary);
}

.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 工具类 */
.text-center {
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .intro-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .advantages-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .contact-content {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
}
</style>
